<template>
  <div class="permission-container">
    <el-card>
      <div class="header">
        <h2>权限管理系统</h2>
        <el-button type="primary" icon="el-icon-refresh" @click="loadPermissions">刷新</el-button>
      </div>
    </el-card>

    <el-row :gutter="20" class="permission-content">
      <el-col :span="6">
        <el-card class="org-tree-card">
          <div class="tree-header">
            <el-input
                v-model="filterText"
                placeholder="搜索部门或用户"
                prefix-icon="el-icon-search"
                clearable
            />
          </div>
          <el-tree
              ref="treeRef"
              class="filter-tree"
              :data="orgTree"
              :props="defaultProps"
              :filter-node-method="filterNode"
              node-key="id"
              default-expand-all
              highlight-current
              @node-click="handleNodeClick"
          >
            <template #default="{ node, data }">
              <span class="custom-node">
                <i :class="data.icon" class="node-icon"></i>
                <span>{{ node.label }}</span>
                <span v-if="data.type === 'department'" class="user-count">({{ data.userCount }}人)</span>
              </span>
            </template>
          </el-tree>
        </el-card>
      </el-col>

      <el-col :span="18">
        <el-card v-if="selectedNode">
          <div class="node-header">
            <h3>{{ selectedNode.label }} - 权限设置</h3>
            <el-button type="primary" @click="savePermissions">保存设置</el-button>
          </div>

          <el-divider />

          <div class="permission-settings">
            <el-form label-width="120px">
              <el-form-item label="数据权限">
                <el-radio-group v-model="dataPermission">
                  <el-radio label="all">全组织</el-radio>
                  <el-radio label="department">所属部门</el-radio>
                  <el-radio label="departmentAndSub">所属及下级部门</el-radio>
                  <el-radio label="specific">特定部门</el-radio>
                </el-radio-group>

                <div v-if="dataPermission === 'specific'" class="specific-departments">
                  <el-transfer
                      v-model="selectedDepartments"
                      :data="departmentOptions"
                      :titles="['所有部门', '已选部门']"
                  />
                </div>
              </el-form-item>

              <el-form-item label="功能权限">
                <el-checkbox-group v-model="functionPermissions">
                  <el-row :gutter="20">
                    <el-col :span="8" v-for="func in allFunctions" :key="func.value">
                      <el-checkbox :label="func.value">{{ func.label }}</el-checkbox>
                    </el-col>
                  </el-row>
                </el-checkbox-group>
                <div class="select-all">
                  <el-button type="text" @click="selectAllFunctions">全选</el-button>
                  <el-button type="text" @click="deselectAllFunctions">全不选</el-button>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </el-card>

        <el-card v-else class="placeholder-card">
          <el-empty description="请从左侧选择部门或用户进行权限设置" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref, reactive, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'Permission',
  setup() {
    const filterText = ref('')
    const treeRef = ref(null)
    const selectedNode = ref(null)

    const orgTree = ref([
      {
        id: 1,
        label: '总公司',
        type: 'company',
        icon: 'el-icon-office-building',
        userCount: 10,
        children: [
          {
            id: 2,
            label: '技术部',
            type: 'department',
            icon: 'el-icon-cpu',
            userCount: 5,
            children: [
              {
                id: 5,
                label: '前端组',
                type: 'department',
                icon: 'el-icon-monitor',
                userCount: 2
              },
              {
                id: 6,
                label: '后端组',
                type: 'department',
                icon: 'el-icon-data-line',
                userCount: 3
              }
            ]
          },
          {
            id: 3,
            label: '市场部',
            type: 'department',
            icon: 'el-icon-data-analysis',
            userCount: 3
          },
          {
            id: 4,
            label: '人力资源部',
            type: 'department',
            icon: 'el-icon-user',
            userCount: 2
          }
        ]
      }
    ])

    const defaultProps = {
      children: 'children',
      label: 'label'
    }

    const dataPermission = ref('departmentAndSub')
    const selectedDepartments = ref([])
    const functionPermissions = ref(['personal', 'stats', 'org'])

    const allFunctions = ref([
      { value: 'personal', label: '个人中心' },
      { value: 'stats', label: '统计' },
      { value: 'org', label: '组织管理' },
      { value: 'recruit', label: '人才招聘' },
      { value: 'personnel', label: '人事管理' },
      { value: 'permission', label: '权限管理' },
      { value: 'positions', label: '职位设置' },
      { value: 'interviews', label: '面试管理' },
      { value: 'logs', label: '操作日志' },
      { value: 'messages', label: '消息中心' },
      { value: 'todos', label: '待办事项' },
      { value: 'approval', label: '审批流程' }
    ])

    const departmentOptions = ref([
      { key: 2, label: '技术部' },
      { key: 3, label: '市场部' },
      { key: 4, label: '人力资源部' },
      { key: 5, label: '前端组' },
      { key: 6, label: '后端组' }
    ])

    const filterNode = (value, data) => {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    }

    const handleNodeClick = (data) => {
      selectedNode.value = data
      // 实际项目中这里会加载该节点的权限设置
    }

    const savePermissions = () => {
      ElMessage.success('权限设置已保存')
    }

    const selectAllFunctions = () => {
      functionPermissions.value = allFunctions.value.map(f => f.value)
    }

    const deselectAllFunctions = () => {
      functionPermissions.value = []
    }

    const loadPermissions = () => {
      ElMessage.success('权限数据已刷新')
    }

    watch(filterText, (val) => {
      treeRef.value.filter(val)
    })

    onMounted(() => {
      // 初始化加载数据
    })

    return {
      filterText,
      treeRef,
      orgTree,
      defaultProps,
      selectedNode,
      dataPermission,
      selectedDepartments,
      functionPermissions,
      allFunctions,
      departmentOptions,
      filterNode,
      handleNodeClick,
      savePermissions,
      selectAllFunctions,
      deselectAllFunctions,
      loadPermissions
    }
  }
}
</script>

<style scoped>
.permission-container {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.permission-content {
  margin-top: 20px;
}

.org-tree-card {
  height: calc(100vh - 200px);
  overflow: auto;
}

.tree-header {
  margin-bottom: 15px;
}

.custom-node {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 14px;
  padding: 5px 0;
}

.node-icon {
  margin-right: 8px;
  font-size: 16px;
}

.user-count {
  margin-left: 5px;
  color: #999;
  font-size: 12px;
}

.node-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.permission-settings {
  padding: 20px;
}

.specific-departments {
  margin-top: 15px;
}

.select-all {
  margin-top: 10px;
}

.placeholder-card {
  height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>